<template>
  <div>
    <template v-if="spin">
      <a-spin :spinning="$store.state.app.loading">
        <keep-alive :max="max"
                    :include="include"
                    :exclude="exclude">
          <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />
      </a-spin>
    </template>
    <template v-else>
      <keep-alive :max="max"
                  :include="include"
                  :exclude="exclude">
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" />
    </template>
  </div>
</template>

<script>

import PropTypes from '@zh/common-utils/prop-types'

export default {
  name: 'RouteView',
  props: {
    max: PropTypes.number.def(undefined),
    spin: PropTypes.bool.def(undefined),
    include: PropTypes.string.def(undefined),
    exclude: PropTypes.string.def(undefined)
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
  position: fixed !important;
}
</style>
